import 'package:flutter/material.dart';
import 'package:manual/pages/custom_scrollview.dart';

class NestedScrollviewPage extends StatelessWidget {
  const NestedScrollviewPage({super.key});
  
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
     final double statusBarHeight = MediaQuery.of(context).padding.top; // 获取状态栏高度
    return DefaultTabController(
      length: 2, // 确保 DefaultTabController 的长度与 TabBar 一致
      child: Scaffold(
        appBar: null,
        body: SafeArea(
          top: false,
          bottom: false,
          child:NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
                // 顶部 SliverAppBar
                SliverAppBar(
                  automaticallyImplyLeading: false, // 去除默认返回按钮
                  title: null, // 移除标题
                  leading: null, // 移除左侧按钮
                  actions: null, // 移除右侧按钮
                  toolbarHeight: 0, // 工具栏高度设为 0
                  collapsedHeight: 0, // 设置固定后的最小高度 如果开启 沉浸式页面 那么设置为  statusBarHeight
                  floating: false,
                  expandedHeight: 200,
                  backgroundColor:theme.scaffoldBackgroundColor,
                  
                  flexibleSpace: const FlexibleSpaceBar(
                    background: SwiperHeader(),
                  ),
                  pinned: true, // 滚动到顶部后固定
                ),
                // 固定 TabBar 的 SliverPersistentHeader
                SliverPersistentHeader(
                  pinned: true,
                  delegate: _SliverTabBarDelegate(
                    const TabBar(
                      tabs: [
                        Tab(text: "AnimatedList"),
                        Tab(text: "ListView"),
                      ],
                    ),
                  ),
                ),
              ];
            },
            body: const TabBarViewWithNestedScroll(),
          ), 
        )
      ),
    );
  }
}

// TabBarView + 内容
class TabBarViewWithNestedScroll extends StatelessWidget {
  const TabBarViewWithNestedScroll({super.key});

  @override
  Widget build(BuildContext context) {
    return TabBarView(
      children: [
        _buildAnimatedList(),
        _buildListView(),
      ],
    );
  }

  Widget _buildAnimatedList() {
    return const AnimatedListWidget();
  }

  Widget _buildListView() {
    return ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text("ListView Item $index"),
        );
      },
    );
  }
}

// AnimatedListWidget
class AnimatedListWidget extends StatefulWidget {
  const AnimatedListWidget({super.key});

  @override
  _AnimatedListWidgetState createState() => _AnimatedListWidgetState();
}

class _AnimatedListWidgetState extends State<AnimatedListWidget> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  final List<int> _items = [1,2,3,4];

  void _addItem() {
    final int newItem = (_items.isNotEmpty ? _items.last + 1 : 0);
    _items.add(newItem);
    _listKey.currentState?.insertItem(_items.length - 1);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: _addItem,
          child: const Text("Add Item"),
        ),
        Expanded(
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _items.length,
            itemBuilder: (context, index, animation) {
              return SlideTransition(
                position: animation.drive(
                  Tween<Offset>(begin: const Offset(-1, 0), end: Offset.zero),
                ),
                child: ListTile(
                  title: Text("Item ${_items[index]}"),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

// 自定义 SliverPersistentHeader 委托类，用于 TabBar
class _SliverTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar tabBar;

  _SliverTabBarDelegate(this.tabBar);

  @override
  Widget build( BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Theme.of(context).scaffoldBackgroundColor,
      child: tabBar,
    );
  }

  @override
  double get maxExtent => tabBar.preferredSize.height;

  @override
  double get minExtent => tabBar.preferredSize.height;

  @override
  bool shouldRebuild(covariant _SliverTabBarDelegate oldDelegate) {
    return false;
  }
}
